Easy Slider » Efecto deslizante

Alen Grakalic es el autor de Easy Slider un plugin de jQuery que nos permite deslizar vertical y horizontalmente cualquier contenido.

Estilo horizontal deslizante imagen
Estilo vertical deslizante imagen
Estilo vertical contenido deslizante

Podemos añadir este efecto en tres pasos, el primero es alojar los archivos .js para conseguir la url que más tarde añadiremos a los script en la plantilla.

Descargar el zip con los archivos.

El zip contiene dos carpetas, usaremos solo la carpeta .js
Extraemos el archivo easySlider y jquery.

Una vez los tenemos alojados nos situamos justo antes de </head> añadimos los scripts:

<script type="text/javascript" src="Url-del-archivo-jquery.js"></script>

<script type="text/javascript" src="Url-del-archivo- easySlider.js"></script>

Donde dice "Url-del-archivo-jquery.js" es el lugar donde añadimos la url del nuestro archivo jquery.js que alojamos en nuestro servidor.
En "Url-del-archivo-easySlider.js" repetimos la operación y añadimos la url de nuestro archivo easySlider.js

Si deseamos la orientación horizontal añadimos a continuación:

<script type='text/javascript'>

$(document).ready(function(){

$("#slider").easySlider();

});

</script>

Si por el contrario deseamos la orientación vertical añadimos:

<script type="text/javascript">

$(document).ready(function(){

$("#slider").easySlider({

orientation:'vertical'

});

});

</script>

Ahora vamos antes de ]]></b:skin> y añadimos los estilos:

/* Easy Slider */
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li{
width:580px;
height:200px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}
/* // Easy Slider */

En width podemos modificar la anchura y con height la altura.
Si deseamos añadir unos estilos al texto de navegación lo podemos hacer añadiendo unas líneas de código:

#prevId{
background:#000;
border:1px solid #eee;
color:#fff;
font-size:16px;
}
#nextBtn{
background:#000;
border:1px solid #eee;
color:#fff;
font-size:16px;
}

Guardamos los cambios y en "Plantilla de Diseño" añadimos un elemento de página o gadget escogiendo HTML...y pegamos en su interior:

<div id="slider">
<ul>
<li><a href="#"><img src="url-imagen-1-"/></a></li>
<li><a href="#"><img src="url-imagen-2-"/></a></li>
<li><a href="#"><img src="url-imagen-3-"/></a></li>
<li><a href="#"><img src="url-imagen-4-"/></a></li>
<li><a href="#"><img src="url-imagen-5-"/></a></li>
</ul>
</div>

El resultado de seguir estos pasos es este ejemplo "Easy Slider » Efecto deslizante vertical"

» Visto en Xyberneticos